<template>
  <div>
    <!-- 
      v-show/v-if
      作用：控制标签的显示隐藏
      语法：
      v-show = "vue变量"  变量值为true表示显示标签，false表示隐藏标签
      v-if = "vue变量"    变量值为true表示显示标签，false表示隐藏标签

      区别（实现原理-面试常问题）：
        v-show：是通过css样式(display)来控制标签的显示隐藏的 -- 消耗性能更小
        v-if：是通过直接删除或创建标签来控制标签的显示隐藏的 -- 消耗性能更大

      应用场景
        v-show: 一般用于需要反复切换标签显示隐藏的场景
        v-if：一般用于一次性（极少数切换）显示隐藏标签的场景
     -->
    <h1 v-show="isok">v-show的盒子</h1>

    <h1 v-if="isok">v-if的盒子</h1>

    <!-- 
      v-if结合v-else一起使用
      注意：一定要相邻的两个兄弟元素直接才可以使用
     -->
    <div>
      <p v-if="age >= 18">你已经成年了，该学习自己敲代码了</p>
      <p v-else>未成年，还得多吃饭！</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isok: true,
      age: 19,
    };
  },
};
</script>

<style>
</style>